<template>
  <div style="width:100%">
    <div v-if="isDesigner">
    </div>
    <div v-else>
      <van-steps :direction="direction" :active="active" active-color="#38f" v-bind="$attrs">
        <van-step v-for="(data, index) in activities" :key="index">
          <span slot="active-icon" class="icon" :class="index <= active ? 'active_icon': 'inactive_icon'">{{index + 1}} </span>
          <span slot="inactive-icon" class="icon" :class="index <= active ? 'active_icon': 'inactive_icon'"> {{index + 1}}</span>
          <slot :data="data">
            <div style="font-size: 14px;color: #212121;font-weight: 500;">{{data.content}}</div>
            <div v-if="direction === 'vertical' && data.result" style="font-size: 12px;font-weight: 400;line-height: 25px;">
              <span style="color: #999999;">办理结果：</span>
              <span style="color: #212121;">{{data.result}}</span>
            </div>
            <div v-if="direction === 'vertical' && data.address" style="font-size: 12px;font-weight: 400;line-height: 25px;">
              <span style="color: #999999;">办理单位：</span>
              <span style="color: #212121;">{{data.address}}</span>
            </div>
            <div v-if="direction === 'vertical' && data.timestamp" style="font-size: 12px;font-weight: 400;line-height: 25px;">
              <span style="color: #999999;">时间：</span>
              <span style="color: #212121;">{{data.timestamp}}</span>
            </div>
          </slot>
          <template slot="dot">
            <div :style="{background: color}" class="timeline_node"></div>
          </template>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>
<script>
export default {
  name: 'timeLine',
  props: {
    // field
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    optionTemplate: {
      type: String,
      default: ''
    },
    activities: {
      type: Array,
      default: () => []
    },
    // 时间戳位置 top / bottom
    placement: 'bottom',
    // 节点类型 primary / success / warning / danger / info
    type: null,
    // 节点颜色
    color: null,
    // 节点尺寸 normal / large
    size: 'normal',
    direction: {
      default: 'horizontal'
    }
  },
  computed: {
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
    active() {
      if (!this.value) {
        return 0
      } else {
        return Number(this.value)
      }
    }
  },
  data() {
    return {
      demoList: [{
        content: '办结',
        result: '终审通过',
        address: '合肥市住房公积金管理中心',
        timestamp: '2023-08-08'
      }, {
        content: '受理',
        result: '同意',
        address: '合肥市住房公积金管理中心',
        timestamp: '2023-08-08'
      }, {
        content: '登记',
        result: '登记通过',
        timestamp: '2023-08-08'
      }]
    }
  },
  created(){
  },
  watch: {
   
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
  .timeline_node {
    width: 11px;
    height: 11px;
    border-radius: 4px;
    background-color: blue;
  }
  .van-step {
    .icon {
      border: 1px solid #ddd;
      border-radius: 8px;
      display: inline-block;
      height: 16px;
      width: 16px;
      text-align: center;
      background: #ddd;
      color: #fff;
      line-height: 16px;
    }
    .active_icon {
      background: var(--tagBg);
    }
  }
::v-deep .van-step--horizontal .van-step__line {
  height: 2px !important;
}

.van-steps--horizontal {
  height: 70px;
  ::v-deep .van-step__title {
    position: absolute;
    top: 45px;
  }
}
.van-step--horizontal:last-child  {
  height: 10px;
  width: 100%;
  text-align: right;
  ::v-deep .van-step__title {
    right: 0px;
  }
}
::v-deep .van-step__title {
  font-family: PingFangSC-Medium;
}

</style>